<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>sql超时次数统计</title>
		<meta name="description" content="Common form elements and layouts" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="../assets/css/amaran.min.css" />
		<script type="text/javascript" src="../plugins/echarts/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="../plugins/echarts/echarts.js"></script>
		<!-- 引入 主题 -->
		<script type="text/javascript" src="../plugins/echarts/macarons.js"></script>
		<script src="../assets/js/ace-extra.min.js"></script>
	</head>

	<body>
		<td>&nbsp;&nbsp;<i class="ace-icon fa blue">选择时间范围：</i></td>
		<td><input id="starttimeInput" type="date" name="time" onchange="loadOneColumn()"></td>
		<td><i class="ace-icon fa black">至</i></td>
		<td><input id="endtimeInput" type="date" name="time" onchange="loadOneColumn()"> </td>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 700px;height:400px;position: absolute;left: 20%;"></div>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
		</script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script src="../assets/js/jquery-ui.custom.min.js"></script>
		<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="../assets/js/chosen.jquery.min.js"></script>
		<script src="../assets/js/spinbox.min.js"></script>
		<!-- ace scripts -->
		<script src="../assets/js/ace-elements.min.js"></script>
		<script src="../assets/js/ace.min.js"></script>
		<script src="../assets/js/a-my-common.js"></script>
		<script src="../assets/js/jquery.amaran.min.js"></script>
		<script type="text/javascript">
					function getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				
				var oneweekdate = new Date(date-7*24*3600*1000);
		        var yearweek = oneweekdate.getFullYear();
		        var monthweek = oneweekdate.getMonth()+1;
		        var dayweek = oneweekdate.getDate();
				
				if((month >= 1 && month <= 9)||(monthweek >= 1 && monthweek <= 9)) {
					month = "0" + month;
					monthweek = "0" + monthweek;
				}
				if((day >= 0 && day <= 9)||(dayweek >= 0 && dayweek <= 9)) {
					day = "0" + day;
					
				}
				var currentdate = year + seperator1 + month + seperator1 + day ;
				var frontdate = yearweek + seperator1 + monthweek + seperator1 + dayweek ;
				var mydates=new Array(frontdate,currentdate);
				var startTime = "";
				var endTime = "";
				startTime = $('#starttimeInput').val() + " 00:00:00"; //获取值
				endTime = $('#endtimeInput').val() + " 23:59:59"; //获取值
				if(startTime == " 00:00:00" && endTime == " 23:59:59") {
//					var dates = getNowFormatDate();
					document.getElementById("starttimeInput").value = mydates[0];
					document.getElementById("endtimeInput").value = mydates[1];
					startTime = mydates[0]+ " 00:00:00";
					endTime = mydates[1]+ " 23:59:59";
				}
				var Dates=new Array(startTime,endTime);
				return Dates;
			}

			function loadOneColumn() {
				var dates = getNowFormatDate();
				var startTime = dates[0];
				var endTime = dates[1];

				var myChart = echarts.init(document.getElementById('main'), 'macarons');
				// 显示标题，图例和空的坐标轴
				myChart.setOption({
					color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"], //饼图颜色
					title: {
						text: '超时sql语句执行的次数统计',
						//	            subtext: '纯属虚构',
						x: 'left'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},

							magicType: {
								show: true,
								type: ['pie', 'funnel'],
								option: {
									funnel: {
										x: '25%',
										width: '50%',
										funnelAlign: 'left',
										max: 1548
									}
								}
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					series: [{
						name: '发布排行',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: []
					}]
				});

				myChart.showLoading();
				var names = [];
				var nums = [];
				$.ajax({
					url: URL_TABLES + '/rapi?operFlag=queryOutTimes&startTime=' + startTime + "&endTime=" + endTime,
					type: "post",
					async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					data: {},
					dataType: "json",
					success: function(result) {
						if(result) {
							var datas = result.root;
							$.each(result.root, function(index, item) {
								names.push(item.META_SQL_MONITOR_ID); //挨个取出类别并填入类别数组 
								nums.push({
									name: item.META_SQL_MONITOR_ID,
									value: item.meta_out_time
								});
							});
							myChart.hideLoading(); //隐藏加载动画
							myChart.setOption({ //加载数据图表

								series: [{
									data: nums
								}]
							});
						} else {
							alert("请重新键入！");
						}
					},
					error: function(errorMsg) {
						alert("图表请求数据失败!" + errorMsg);
					},
				});
			};
			loadOneColumn();
			//  setInterval("loadOneColumn()",5000);
		</script>
	</body>
</html>